* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

html {
    font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
        Arial, sans-serif;
    #app {
        background: #fff;
        margin: 0 auto;
        width: 500px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 40px 0;
        color: var(--color-text);
        font-size: var(--font-size);

        --block-side: 25px;
        --block-bg: linear-gradient(
                180deg,
                transparent calc(var(--block-side)),
                var(--border-color-light) calc(var(--block-side) + 1px),
                var(--border-color-light) var(--block-side)
            ),
            linear-gradient(
                90deg,
                transparent calc(var(--block-side)),
                var(--border-color-light) calc(var(--block-side) + 1px),
                var(--border-color-light) var(--block-side)
            );
        .block {
            width: var(--block-side);
            height: var(--block-side);
            border-radius: 2px;
            &.block1 {
                background-color: #b8f1cc;
            }
            &.block2 {
                background-color: #d9b8f1;
            }
            &.block3 {
                background-color: #b8d38f;
            }
            &.block4 {
                background-color: #e96d29;
            }
            &.block5 {
                background-color: #f3d751;
            }
            &.block6 {
                background-color: #f1707d;
            }
            &.block7 {
                background-color: #c86f67;
            }
            &.block1,
            &.block2,
            &.block3,
            &.block4,
            &.block5,
            &.block6,
            &.block7 {
                box-shadow:
                    inset -2px -2px 2px #00000066,
                    inset 3px 3px 2px #ffffff44;
            }
            &.clear {
                animation: clear 0.25s linear infinite;
            }
        }
    }
}
@keyframes clear {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.068);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

:root {
    --color-text: #303133;
    --font-size: 14px;
    --border-color: #cdd0d6;
    --border-color-light: #e2e3e6;

    --default-button-text-color: #606266;
    --default-button-bg-color: #ffffff;
    --default-button-border-color: #dcdfe6;
    --default-btn-active-text-color: #409eff;
    --default-btn-active-border-color: #409eff;
    --default-btn-active-bg-color: #ffffff;

    --primary-button-text-color: #409eff;
    --primary-button-bg-color: #ecf5ff;
    --primary-button-border-color: #a0cfff;
    --primary-btn-active-text-color: #ffffff;
    --primary-btn-active-border-color: #337ecc;
    --primary-btn-active-bg-color: #337ecc;

    button {
        --button-text-color: var(--default-button-text-color);
        --button-bg-color: var(--default-button-bg-color);
        --button-border-color: var(--default-button-border-color);
        --button-border: 1px solid var(--button-border-color);
        padding: 6px 18px;
        color: var(--button-text-color);
        background-color: var(--button-bg-color);
        border: var(--button-border);
        border-radius: 4px;
        user-select: none;
        cursor: pointer;
        & + button {
            margin-left: 15px;
        }

        &[skin="primary"] {
            --button-text-color: var(--primary-button-text-color);
            --button-bg-color: var(--primary-button-bg-color);
            --button-border-color: var(--primary-button-border-color);
            &:active,
            &:hover {
                color: var(--primary-btn-active-text-color);
                background-color: var(--primary-btn-active-bg-color);
                border-color: var(--primary-btn-active-border-color);
            }
        }
        &:active,
        &:hover {
            color: var(--default-btn-active-text-color);
            background-color: var(--default-btn-active-bg-color);
            border-color: var(--default-btn-active-border-color);
        }
    }
}
